import React from 'react';
import ReactDOM from 'react-dom';
import { Toast, Button, WingBlank, Icon, Result, WhiteSpace } from 'antd-mobile';
import Header from './components/Header';
import SignUp from './components/SignUp';
import Footer from './components/Footer'; 
import Report from './components/Report';
import { Setting } from './components/Setting';
import Translate from './components/Translate';

import 'whatwg-fetch'

import { createForm } from 'rc-form';

import './enroll.css'

const App = React.createClass({
	getInitialState() {
    return {
    	data:{
    		school:'',
    		major:''
    	},
      changeData:{
      },
      loading: true,
      done: false,
    }
  },

	onSubmit: function(data) {

		Toast.loading('提交中', 0);

		fetch( Setting.BaseUrl + 'create-enroll-info', {
      credentials: 'include',
      mode: 'cors',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(resp => resp.json()).then(json => {
      Toast.hide();
    	if( json.success ){
        this.setState({done: true});
    	}else{
    		Toast.offline( json.error , 2 );
    	}
    })
	},

  renderContent() {
    const tr = new Translate(this.state.translate);

    if (this.state.loading) {
      return (
        <div style={{textAlign: 'center'}}>
          <Icon type="loading" size="lg" />
        </div>
      );
    } else if (this.state.done) {
      return (
        <WingBlank>
          <div>
            <Result
              img={<Icon size="lg" type={require('./svg/complete.svg')} className="icon" style={{width: '1.2rem', height: '1.2rem'}}/>}
              title="已申请"
              message="申请信息已经提交，请等待审核"
            />
          </div>
          <WhiteSpace size="lg" />
          <Button className="btn" type="ghost" onClick={() => window.location.href = "list.html"}>查看</Button>
        </WingBlank>
      );
    } else if (! this.state.loading) {
      return (
        <form id="myForm">
          <SignUp
            title=""  
            nodeName="div-step-active"
            data = { this.state.data }
            onSubmit={this.onSubmit}
            translate={tr}
          />
        </form>
      );
    } else {
      return null;
    }
    
  },

  render() {
    return (
    <div className="container enroll-container" id="container">
    	<Header title="申请报名" leftContent="" />
        {this.renderContent()}
    </div>);
  },

  componentDidMount(){
  	var _this = this;
  	fetch( Setting.BaseUrl + 'enroll-info', {
      credentials: 'include',
      mode: 'cors',
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then( function(resp) {
      return resp.json();
    }).then( function(json) {

      _this.setState(Object.assign({}, _this.state, {
      	data: json.enrolls,
        changeData: {},
        loading: false,
        translate: json.translate,
      }), function(){
        //_this.handChange([_this.state.changeData.bkyxsm]);
      });
    })
  }
})

ReactDOM.render(<App />, document.getElementById('example'));
